<template>
	<view>
		<view class="wanl-product">
			<!-- 搜索框 -->
			<view class="search flex align-center margin-lr-sm round" style="border: 2rpx solid #aaaaaa20;">
				<view class="icon text-df  wanl-gray-dark">
					<text class="wlIcon-sousuo1"></text>
				</view>
				<input type="text" class="input" v-model="params.search" @confirm="searchPet" placeholder="搜索宠物"/>
			</view>
			
			<view class="pet-container">
				<view class="pet_box" v-for="(item, index) in dataList" :key="index">
					<view>
						<view @tap="handleGoods(item.id)">
							<image class="image product-image" :src="$wanlshop.oss(item.show_images[0])"
								mode="aspectFill">
							</image>
							<view class="content padding-bj">
								<view class="publisher flex align-center">
									<view class="img-bg avatar"
										:style="{ backgroundImage: `url(${$wanlshop.oss(item.pet_avatar)})` }">
									</view>
									<view class="pet-name">{{ item.pet_name }}</view>
								</view>
								<scroll-view :scroll-x="true">
									<view class="tag-list">
										<view class="tag" v-for="(tag, index) in item.tag" :key="index">
											{{ tag }}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'index-adopt',
		data() {
			return {
				dataList: [],
				wanlsys: {},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				params: {
					search: '',
					page: 1,
				},
			}
		},
		onLoad() {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.loadData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataList = [];
			this.last_page = 0;
			this.params.page = 1;
			this.params.search = '';
			this.reload = true;
			this.loadData();
		},
		// 监听上拉
		onReachBottom() {
			if (this.status == 'noMore') return;
			console.log('onReachBottom')
			this.reload = false;
			this.params.page = this.params.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		},
		methods: {
			searchPet(){
				console.log('搜索',this.params.search)
				this.dataList = [];
				this.last_page = 0;
				this.params.page = 1;
				this.reload = true;
				this.loadData();
			},
			// 获取宠物列表
			loadData(item) {
				this.$api.get({
					loadingTip: '加载中',
					url: `/wanlshop/pet/list?page=${this.params.page}&limit=${10}&keyword=${this.params.search}`,
					success: res => {
						console.log('pet-list', res)

						// 标签处理 字符串转数组
						res.list.forEach(item => {
							item.show_images = item
								.show_images.split(
									',');
							item.tag = item.tag
								.split(',');
						})

						uni.stopPullDownRefresh();
						this.status = 'more';
						this.dataList = this.reload ? res.list : this.dataList.concat(res.list); //数据 追加

						console.log('last_page',this.last_page)

						if (this.last_page > res.list.length || res.list.length < 10) {
							this.status = 'noMore';
						} else {
							this.last_page = res.list.length; //总页码
							this.contentText.contentdown = '上拉显示更多';
						}
					}
				})
			},
			handleGoods(id) {
				this.$wanlshop.to(`/pages/adopt/details?id=${id}`)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wanl-product {
		background-color: $bg-color-active;
		min-height: 100vh;
		padding-bottom: 80rpx;
		padding-top: 20rpx;
	}
	
	.search{
		padding: 20rpx;
		height: 80rpx;
		background-color: white;
		
		.input{
			width: 100%;
			margin-left: 10rpx;
		}
	}

	.pet-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		padding: 20rpx;
		box-sizing: border-box;
		gap: 20rpx;

		.pet_box {
			width: 100%;
			margin-bottom: 10rpx;
			// box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.2);
			border: 2rpx solid #dfdfdf;
			border-radius: 20rpx;
			overflow: hidden;

			.wanl-image {
				width: 100%;
			}
		}

		.content {
			.publisher {
				gap: 6rpx;
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.avatar {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					flex-shrink: 0;
					background-size: cover;
				}
			}

			.pet-name {
				font-size: 28rpx;
				font-weight: bold;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tag-list {
				display: flex;
				//flex-wrap: wrap;
				flex-wrap: nowrap;
				gap: 10rpx 15rpx
			}

			.tag {
				background-color: #F2F2F2;
				color: #5C3734;
				padding: 4rpx 10rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				width: fit-content;
				border: 2rpx solid #846966;
				white-space: nowrap;
			}
		}
	}

	.product-activity {
		border-radius: 20rpx;
		overflow: hidden;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);

		image {
			width: 100%;
			display: block;
		}
	}

	.product-image {
		width: 100%;
		//min-height: 340rpx;
		min-height: 340rpx;
		max-height: 340rpx;
	}

	.normal-img {
		width: 100%;
		height: 340rpx !important;
		background-size: cover !important;
		background-position: center !important;
	}
</style>